<template>
    <div class="govIndex">
<<<<<<< HEAD
        <public-header></public-header>
        <v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour>
        <div style="margin-bottom:60px">
            <div class='govIndexSearch'>
                <van-search id="v-step-0" @search="onSearch" style="width:90%" v-model="searchvalue" background="#07c160" placeholder="请输入搜索关键词" />
                <div style="height:34px;line-height:34px;width:10%">
                    <van-icon name="friends-o" size="24" color="white" style="margin-top:13px"/>
                </div>
            </div>
            <div class='govIndexTopBtns'>
                <div class='govTopBtnsItems'>
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.scan"></use>
                    </svg>
                    <p class='govTopBtnsItemsText' info='4'>扫一扫</p>
                </div>
                <div class='govTopBtnsItems'>
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.weituoguanli"></use>
                    </svg>
                    <p class='govTopBtnsItemsText'>委托任务</p>
                </div>
                <div class='govTopBtnsItems'>
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.xinfangtousu"></use>
                    </svg>
                    <p class='govTopBtnsItemsText'>消费者投诉</p>
                </div>
                <div class='govTopBtnsItems'>
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.shouye"></use>
                    </svg>
                    <p class='govTopBtnsItemsText'>质检任务</p>
=======
        <v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour>
        <div style="margin-bottom:60px">
            <div class="govIndexSearch">
                <van-search
                    id="v-step-0"
                    @search="onSearch"
                    style="width:90%"
                    v-model="searchvalue"
                    background="#07c160"
                    placeholder="请输入搜索关键词"
                />
                <div style="height:34px;line-height:34px;width:20%;display:flex">
                    <van-icon @click="showHelp" name="question-o" size="24" color="white" style="margin-top:13px" />
                    <van-icon name="friends-o" size="24" color="white" style="margin-top:13px;margin-left:10px" />
                </div>
            </div>
            <div class="govIndexTopBtns">
                <div class="govTopBtnsItems" id="v-step-1">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.scan" />
                    </svg>
                    <p class="govTopBtnsItemsText" info="4">扫一扫</p>
                </div>
                <div class="govTopBtnsItems">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.weituoguanli" />
                    </svg>
                    <p class="govTopBtnsItemsText">委托任务</p>
                </div>
                <div class="govTopBtnsItems">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.xinfangtousu" />
                    </svg>
                    <p class="govTopBtnsItemsText">消费者投诉</p>
                </div>
                <div class="govTopBtnsItems">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.shouye" />
                    </svg>
                    <p class="govTopBtnsItemsText">质检任务</p>
>>>>>>> zcm
                </div>
            </div>
            <div>
                <van-grid :column-num="2">
<<<<<<< HEAD
                    <van-grid-item @click='toStatute'>
                        <svg class="icon govIconSize" aria-hidden="true">
                            <use :xlink:href="icons.gov.index.zhengcefagui"></use>
                        </svg>
                        <p class='govTopBtnsItemsText'>法规管理</p>
                    </van-grid-item>
                    <van-grid-item @click='toGuide'>
                        <svg class="icon govIconSize" aria-hidden="true">
                            <use :xlink:href="icons.gov.index.shanghuzhinan"></use>
                        </svg>
                        <p class='govTopBtnsItemsText'>监管指南</p>
                    </van-grid-item>
                </van-grid>
                <van-grid :column-num="2">
                    <van-grid-item>
                        <svg class="icon govIconSize" aria-hidden="true">
                            <use :xlink:href="icons.gov.index.biaozhun"></use>
                        </svg>
                        <p class='govTopBtnsItemsText'>标准法规管理</p>
                    </van-grid-item>
                    <van-grid-item>
                            <svg class="icon govIconSize" aria-hidden="true">
                                <use :xlink:href="icons.gov.index.shouye"></use>
                            </svg>
                            <p class='govTopBtnsItemsText'>监管机构查询</p>
                    </van-grid-item>
                </van-grid>
                <van-grid :column-num="2">
                    <van-grid-item>  
                        <svg class="icon govIconSize" aria-hidden="true">
                            <use :xlink:href="icons.gov.index.chaxun"></use>
                        </svg>
                        <p class='govTopBtnsItemsText'>检测机构管理</p>
                    </van-grid-item>
                    <van-grid-item>
                            <svg class="icon govIconSize" aria-hidden="true">
                                <use :xlink:href="icons.gov.index.getigongshanghu"></use>
                            </svg>
                            <p class='govTopBtnsItemsText'>商户管理</p>
                    </van-grid-item>
                </van-grid>
                <van-grid :column-num="2">
                    <van-grid-item @click='toRegime'>  
                        <svg class="icon govIconSize" aria-hidden="true">
                            <use :xlink:href="icons.gov.index.zhidu"></use>
                        </svg>
                        <p class='govTopBtnsItemsText'>制度管理</p>
                    </van-grid-item>
                    <van-grid-item>
                         
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
        <public-footer></public-footer>
    </div>
</template>

<script>

import icons from '@/tools/icon'
import  publicHeader  from '@/components/publicHeader';
import  publicFooter  from '@/components/publicFooter';
import { 
    Button
    ,NavBar
    ,Icon
    ,PullRefresh 
    ,List
    ,SwipeCell
    ,Collapse
    , CollapseItem
    ,Divider
    ,Panel
    ,DropdownMenu
    , DropdownItem
    ,Search
    ,Dialog
    ,Grid
    , GridItem
    } from 'vant';
export default {
    name: 'govIndex',
    components: {
        publicFooter,
        publicHeader,
        [Grid.name]:Grid,
        [GridItem.name]:GridItem,
        [NavBar.name]:NavBar,
        [Button.name]:Button,
        [Icon.name]:Icon,
        [PullRefresh.name]:PullRefresh,
        [List.name]:List,
        [SwipeCell.name]:SwipeCell,
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Divider.name]:Divider,
        [Panel.name]:Panel,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Search.name]:Search,
        [Dialog.name]:Dialog,
    },
    data () {
        return {
            icons:icons,
            searchvalue:'',
            steps: [
                {
                    target: '#v-step-0',  // We're using document.querySelector() under the hood
                    content: `输入关键字搜索功能!`,
                    params: {
                        placement: 'left'
                    }
                },
              
=======
                <van-grid-item @click="toStatute" >
                    <svg class="icon govIconSize" aria-hidden="true" id="v-step-2">
                        <use :xlink:href="icons.gov.index.zhengcefagui" />
                    </svg>
                    <p class="govTopBtnsItemsText">法规管理</p>
                </van-grid-item>
                <van-grid-item @click="toGuide">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.shanghuzhinan" />
                    </svg>
                    <p class="govTopBtnsItemsText">监管指南</p>
                </van-grid-item>
                </van-grid>
                <van-grid :column-num="2">
                    <van-grid-item @click="toRegime">
                        <svg class="icon govIconSize" aria-hidden="true">
                    <use :xlink:href="icons.gov.index.zhidu" />
                    </svg>
                    <p class="govTopBtnsItemsText">制度管理</p>
                </van-grid-item>
                <van-grid-item @click="toGovSuperviseSearch">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.shouye" />
                    </svg>
                    <p class="govTopBtnsItemsText">监管机构查询</p>
                </van-grid-item>
                </van-grid>
                <van-grid :column-num="2">
                <van-grid-item>
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.chaxun" />
                    </svg>
                    <p class="govTopBtnsItemsText">检测机构管理</p>
                </van-grid-item>
                <van-grid-item>
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.getigongshanghu" />
                    </svg>
                    <p class="govTopBtnsItemsText">商户管理</p>
                </van-grid-item>
                </van-grid>
                <van-grid :column-num="2">
                <van-grid-item @click="toMechanismUser">
                    <svg class="icon govIconSize" aria-hidden="true">
                        <use :xlink:href="icons.gov.index.zhidu" />
                    </svg>
                    <p class="govTopBtnsItemsText">机构人员</p>
                </van-grid-item>
                <van-grid-item>
                </van-grid-item>
                </van-grid>
            </div>
        </div>
        <van-popup 
            v-model="showSearchResult"
            position="bottom"
            :style="{ height: '100%' }"
        >
            <search-result 
                v-if="showSearchResult" 
                @closeSelf='closeSelf'
                :searchvalue='searchvalue'
                :fopenid='fopenid'
            />
        </van-popup>
 
        <public-footer></public-footer>
    </div>
</template>
<script>
import icons from "@/tools/icon";
import publicFooter from "@/components/publicFooter";
import searchResult from "@/views/gov/searchResult";
import {
  Button,
  NavBar,
  Icon,
  PullRefresh,
  List,
  SwipeCell,
  Collapse,
  CollapseItem,
  Divider,
  Panel,
  DropdownMenu,
  DropdownItem,
  Search,
  Dialog,
  Grid,
  GridItem,
  Popup,
  Loading,
  Toast
} from "vant";
export default {
    name: "govIndex",
    components: {
        publicFooter,
        searchResult,
        [Toast.name]: Toast,
        [Loading.name]: Loading,
        [Popup.name]: Popup,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem,
        [NavBar.name]: NavBar,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [PullRefresh.name]: PullRefresh,
        [List.name]: List,
        [SwipeCell.name]: SwipeCell,
        [Collapse.name]: Collapse,
        [CollapseItem.name]: CollapseItem,
        [Divider.name]: Divider,
        [Panel.name]: Panel,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Search.name]: Search,
        [Dialog.name]: Dialog
    },
    data() {
        return {
            fopenid:'ceshi',
            showSearchResult:false,
            icons: icons,
            searchvalue: "",
            steps: [
                {
                    target: "#v-step-0",
                    content: `输入关键字搜索功能!`,
                    params: {
                        placement: "top"
                    }
                },
                {
                    target: "#v-step-1",
                    content: `点击扫一扫打开摄像头`,
                    params: {
                        placement: "left"
                    }
                },
                {
                    target: "#v-step-2",
                    content: `法规搜索!`,
                    params: {
                        placement: "left"
                    }
                },
                {
                    target: "#v-step-3",
                    content: `消息查看!`,
                    params: {
                        placement: "top"
                    }
                }
>>>>>>> zcm
            ],
            myOptions: {
                useKeyboardNavigation: false,
                labels: {
<<<<<<< HEAD
                    buttonStop: '确定'
                }
            },
 
        }
    },
    mounted: function () {
        this.$tours['myTour'].start()
    },
    created() {
     
    },
    methods:{
        onSearch(){
            this.$router.push({path: '/govsearchResult'});
        },
        toStatute(){
            this.$router.push({path: '/govStatute'});
        },
        toGuide(){
            this.$router.push({path: '/govGuide'});
        },
        toRegime(){
            this.$router.push({path: '/govRegime'});
        }
    }
}
</script>
<style >
.govIndexSearch{
    display: flex;
    width: 100%;
    background: #07c160;
}
.govIndexTopBtns{
    width:90%;
    margin:20px auto;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    height: 100px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
}
.govIconSize{
    width: 50px;
    height: 50px;
    margin-top:10px
}
.govTopBtnsItems{
    width: 25%;
}
.govTopBtnsItemsText{
    font-size: 14px;
    margin-bottom:0;
    margin-top:5px
}
.mesinfo{
    position: absolute;
    top: 10px;
    right: 0;
    box-sizing: border-box;
    min-width: 16px;
    padding: 0 3px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
    line-height: 14px;
    text-align: center;
    background-color: #ee0a24;
    border: 1px solid #fff;
    border-radius: 16px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
=======
                    buttonSkip: '退出',  
                    buttonPrevious: '上一步',
                    buttonNext: '下一步',
                    buttonStop: '结束'
                }
            }
        };
    },
    mounted: function() {
        
    },
    created() {},
    methods: {
        showHelp(){
            this.$tours["myTour"].start();
        },
        closeSelf(){
            this.searchvalue = ''
            this.showSearchResult = false
        },
        onSearch() {

            this.showSearchResult = true
            //this.$router.push({ path: "/govsearchResult" });
        },
        toStatute() {
            this.$router.push({ path: "/govStatute" });
        },
        toGuide() {
            this.$router.push({ path: "/govGuide" });
        },
        toRegime() {
            this.$router.push({ path: "/govRegime" });
        },
        toGovSuperviseSearch() {
            this.$router.push({ path: "/govSuperviseSearch" });
        },
        toMechanismUser() {
            this.$router.push({ path: "/govMechanismUser" });
        }
    }
};
</script>
<style >
.govIndexSearch {
  display: flex;
  width: 100%;
  background: #07c160;
}
.govIndexTopBtns {
  width: 90%;
  margin: 20px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
}
.govIconSize {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
.govTopBtnsItems {
  width: 25%;
}
.govTopBtnsItemsText {
  font-size: 14px;
  margin-bottom: 0;
  margin-top: 5px;
}
.mesinfo {
  position: absolute;
  top: 10px;
  right: 0;
  box-sizing: border-box;
  min-width: 16px;
  padding: 0 3px;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
  line-height: 14px;
  text-align: center;
  background-color: #ee0a24;
  border: 1px solid #fff;
  border-radius: 16px;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}
.govIndex .van-grid-item__content{
    padding:8px
>>>>>>> zcm
}
</style>
